<div class="bjui-pageContent">
    <form id="user-protocol-add" method="post" class="form-horizontal" action="/userProtocol/edit" >
        <input type="hidden"  class="input-nm" name="id" id="userproto-id" value="{{id}}" >
        <input type="hidden"  class="input-nm" name="ktvlist" id="userproto-ktvlist">
        <div class="form-group">
            <label class="col-lg-12 col-sm-12 control-label"><span class="required-span">*</span>用户协议名称:
                 
            </label>
            <div class="col-lg-12 col-sm-12">
                <input type="text" class="form-control input-nm" name="name" id="userproto-name">
            </div>
        </div>
       <div class="form-group">
            <label class="col-lg-12 col-sm-12 control-label">添加协议字段:
            </label>
            <div class="col-lg-12 col-sm-12 user-protocol">
                <select class="form-control input-nm " name="kValue" id="userproto-kValue" data-width="160" onchange="select_onchang()">
                    <option value="" disabled selected  >请选择字段类型</option>
                </select>
                <input type="text" class="input-nm tValue" style="width: 140px;vertical-align: top;" disabled="true" placeholder="t值">
                <input type="text" class="input-nm kValues" style="width: 140px;vertical-align: top;" disabled="true"  placeholder="k值">
                    <div class="form-group" style="width: 160px;display: inline-block;">
                        <input type="text" class="input-nm vValue form-control" style="width: 140px;"  name="company" placeholder="单位" >
                    </div>
                <button type="button" class="field-save-btn mt-4 fr" onclick="field_add_btn()"  data-icon="home" disabled="true">添加字段</button>
            </div>
            <div class="col-lg-12 col-sm-12 mt-20">
            <div id="user-protocol-list">
                <ul class="title">
                    <li class="bfz-30" style="display: none;">id</li>
                    <li class="bfz-40">字段类型</li>
                    <li  class="bfz-25">数据类型</li>
                    <li  class="bfz-25">k值</li>
                    <li  class="bfz-25">单位</li>
                    <li  class="bfz-10">操作</li>
                </ul>
                <ul class="protocol-list-ul">
                </ul>
            </div>
        </div>
        </div>
        
        <div class="form-group" >
            <label class="col-lg-12 col-sm-12 control-label">私有协议描述:</label>
            <div class="col-lg-12 col-sm-12">
                <textarea  style="width: 100%;height: 100px;" name="memo" id="userproto-memo"></textarea>
            </div>
        </div>
    </form>
</div>
<div class="btns-group bjui-pageFooter">
    <button type="button" class="close-btn">取消</button>
    <button type="submit" class="save-btn">保存</button>
</div>
<script type="text/javascript">
var objKtv;
$(function(){
    var id=$("#userproto-id").val();
    get_ktv_list(); 
    $('.protocol-list-ul').sortable();
    if(id){
        get_userProtocol(id);
    }
   
    dialog_close(); 
    $('#user-protocol-add')
        .formValidation({
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            trigger:'blur',
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '请填写用户协议名称'
                        },
                        regexp: {
                            regexp: /^[\u4e00-\u9fa5_a-zA-Z0-9-]{2,30}$/,
                            message: '用户协议名称只能由字母、数字、中文、下划线和减号组成,长度必须2到30之间'
                        }
                    }
                },
                company: {
                    validators: {
                        stringLength: {
                            message: '长度不得超过15个字节',
                            max: 15,
                            min:1
                        }
                    }
                },
                memo:{
                  validators: {
                      stringLength:{
                        message:'私有协议描述不得超过200个字符',
                        max:200
                      }
                  }
                }
            }
        })
        .on('success.form.fv', function(e) {
            // Prevent form submission
            e.preventDefault();
            var ktvlist=[];
            $(".protocol-list-ul li").each(function(index){
                var id=$(this).find('.kid').text();
                var t=$(this).find('.t_description').text();
                var kValues=$(this).find('.kValues').text();

                ktvlist.push('{"kid":'+id+',"kValues":'+kValues+',"t_description":"'+t+'","seq":'+index+'}')
            })
            $("#userproto-ktvlist").val('['+ktvlist+']');
            var $form = $(e.target);

            var bv = $form.data('formValidation');
            $.post($form.attr('action'), $form.serialize(), function(result) {
                if(result.statusCode=='200'){
                    BJUI.alertmsg('ok',result.message);
                    BJUI.dialog('closeCurrent');
                    BJUI.navtab('refresh', 'sysprotocol')
                }
            }, 'json');
            
        }) 
    $('[name="company"]').blur(function(event) {
        if($('#user-protocol-add').data('formValidation').isValidField('company') && $('#userproto-kValue').attr('changeValue')){
            $(".field-save-btn").attr("disabled",false);
        }
      
    });
})
function get_ktv_list(){
    $.ajax({
        url:"/userProtocol/getKtvList",
        type:"post",
        dataType:"json",
        success:function(data){
            if(data.statusCode=='200' && data.list !=''){
                objKtv=data.list;
                $.each(data.list,function(i,item){
                    $("#userproto-kValue").append("<option value="+item.id+">"+item.name+"</option>");
                })
            }
            $("#userproto-kValue").selectpicker('render');
            $("#userproto-kValue").selectpicker('refresh');
        }
    })
}
function get_userProtocol(id){
    $.ajax({
        url:'/userProtocol/getUserProtocol',
        type:'post',
        data:{'id':id},
        dataType:'json',
        success:function(json){
            
           $("#userproto-name").val(json.data.name);
           $("#userproto-memo").val(json.data.memo);
           var data=json.data.ktvlist.sort(sortNumber);
           $.each(data,function(i,item){
                var t=type_onversion(item.t);
                add_field(item.kid,item.kname,item.k,t,item.t_description)
           })
        }
    })
}
function sortNumber(a,b)
{
return a.seq - b.seq
}
function character_length(){
    if( $('.vValue').val().length>15){
        $('.vValue').val('');
    }
}
function add_field(kid,kname,kValues,t,t_description){
    $(".protocol-list-ul").append("<li>"+
        "<div class='bfz-30 display-none kid'>"+kid+"</div>"+
        "<div class='bfz-40' style='overflow:hidden;text-overflow:ellipsis;white-space: nowrap;'>"+kname+"</div>"+
        "<div class='bfz-25'>"+t+"</div>"+
        "<div class='bfz-25 kValues'>"+kValues+"</div>"+
        "<div class='bfz-25 t_description'>"+t_description+"</div >"+
        "<div class='bfz-10'><a title='删除' onclick='del_protocol_list(this)' class='label label-danger'><i class='fa fa-trash-o'></i></a></div>"+
        "</li>"
    )
}
function select_onchang(){
    $('#userproto-kValue').attr('changeValue',true);
    $(".field-save-btn").attr("disabled",false);
    if(objKtv){
         $.each(objKtv,function(i,item){
            if(item.id==$("#userproto-kValue").selectpicker('val')){
                $(".tValue").val(item.tname);    
                $(".kValues").val(item.k);    
                $(".vValue").val('');
            }
        })
    }
}

function field_add_btn(){
    var companyBool=$('#user-protocol-add').data('formValidation').isValidField('company')
   if(companyBool==true || companyBool==null){
        var kid=$("#userproto-kValue").val();
        var kValue=$("#userproto-kValue").find("option:selected").text();
        var kValues=$(".kValues").val(); //k值
        var tValue=$(".tValue").val();
        var vValue=$(".vValue").val();
        add_field(kid,kValue,kValues,tValue,vValue)
   }
    
}
function del_protocol_list(obj){
    $(obj).parent('div').parent('li').remove();
}

</script>